import React, { Component } from 'react';
import { Form, Button, Select, Input, Table, Tag ,DatePicker} from 'antd';
import style from './style.less'
import ReactQuill from 'react-quill'
const FormItemContent = {
    Input,
    Select,
    ReactQuill,
    DatePicker
}
const { Option } = Select;
class SuperForm extends Component {
    static defaultProps = {
        items: [],
        size: 'large',
        layout: 'horizontal',
        submitText: '提交',
        onSubmit: () => { }
    }
    handlerSubmit = (values) => {
        if(values.start_time){
            let time = values.start_time._d
            let d = new Date(time)
            let dateValue = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
            let thistime = dateValue
            thistime = thistime.replace(/-/g,'/')
            let t = new Date(thistime)
            t = t.getTime()
            values.start_time = t
        }
           let time = values.end_time._d
            let d = new Date(time)
            let dateValue = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
            let thistime = dateValue
            thistime = thistime.replace(/-/g,'/')
            let t = new Date(thistime)
            t = t.getTime()
            values.end_time = t
        this.props.onSubmit(values)
    }
    render_form_item(item) {
        let FormComponent = ''
        if (typeof item.content === 'string') {
            FormComponent = FormItemContent[item.content]
        }
        let ItemContent = typeof item.content === 'string' ?
            <FormComponent {...(item.props || {})} /> :
            React.cloneElement(item.content, item.props)


        if (item.content === 'Select') {
            ItemContent = (
                <Select>
                    {
                        item.options.map(item => <Option value={item.value} key={item.value}>{item.text}</Option>)
                    }
                </Select>
            )
        }
        if (item.content === 'ReactQuill') {
            ItemContent = (
                <ReactQuill
                    theme='snow'
                    modules={{
                        toolbar: [
                            [{ 'header': [1, 2, false] }],
                            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
                            ['link', 'image'],
                            ['code-block'],
                            ['clean']
                        ]
                    }}
                    formats={[
                        'header',
                        'bold', 'italic', 'underline', 'strike', 'blockquote',
                        'list', 'bullet', 'indent',
                        'link', 'image','code-block'
                    ]}
                />
            )
        }

        if(item.content === 'DatePicker'){
            ItemContent = <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" name={item.name}/>
        }
        return (
            <Form.Item label={item.label} name={item.name} key={item.name} rules={item.rules || []}>
                {ItemContent}
            </Form.Item>
        )
    }
    get render_form_items() {
        const items = this.props.items.map((item) => {
            return this.render_form_item(item)
        })
        return items
    }
    get initialValues() {
        const defaulteValues = {}
        this.props.items.forEach(item => {
            defaulteValues[item.name] = item.defaulteValue || ''
        })
        return defaulteValues
    }


    render() {
        const { submitText } = this.props
        return (
            <div className={style[this.props.layout]}>
                <Form className={style.baseForm}
                    onFinish={this.handlerSubmit}
                    size='large'
                    initialValues={this.initialValues}
                    ref='form'
                    layout={this.props.layout}
                >
                    {
                        this.render_form_items
                    }
                    <Form.Item>
                        <Button type='primary' htmlType='submit'>{submitText}</Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default SuperForm;